<template>
	<view>
		<view class="publicTitle" :style="{'background':bgColor,'height': statusBarHeight+buttonHeight+(buttonTop - statusBarHeight) * 2+'px'}">
			<view :style="{'height': statusBarHeight+buttonHeight+(buttonTop - statusBarHeight) * 2+'px','padding-top':statusBarHeight+'px'}" class="title">
				<image @tap="goSystemInfoList" src="/static/img/info.png" class="logo" v-if="isLogo"> <view v-if="newmsg!=0"  class="newnum">{{newmsg}}</view> </image>
				<view class="rpoBoxs" @tap.stop = "getback()"  v-if="isBack">
					<image class="back" src="/static/img/back.png"  ></image>
				</view>
				<view class="word" :style="{'color':color}">{{title}}</view>
			</view>
		</view>
		<view  :style="{'height': buttonHeight+statusBarHeight+(buttonTop - statusBarHeight) * 2+'px'}"></view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:null,
				buttonHeight:null,
				buttonTop:null,
				newmsg:0,
			}
		},
		props:{
			newmsgs(){
					this.http('/api/sys_msg/index', 'post', {}).then(res => {
						if (res.sta == 200) {
							let num=uni.getStorageSync('msgnum')
							if(res.data.data.length!=num){
								this.newmsg=res.data.data.length-num
							}
							console.log(res.data.data)
						}
					})
			},
			isLogo:{
				default:false,
				type:Boolean
			},
			isBack:{
				default:true,
				type:Boolean
			},
			title:{
				default:'',
				type:String
			},
			bgColor:{
				default:'#F2F2F5',
				type:String
			},
			color:{
				default:'#000',
				type:String
			}
		},
		created () {
			//获取状态栏信心
			this.getStausBarHeight();
			//获取小程序右上角按钮信息
			// #ifdef MP-WEIXIN
			this.getBottonInfo();
			// #endif
		},
		onLoad() {
			
		},
		onPageScroll(e) {
			
		},
		methods: {
			getStausBarHeight() {
				try {
				  const res = uni.getSystemInfoSync();
				  this.statusBarHeight = res.statusBarHeight;
				  // console.log(res);
				  // return res.statusBarHeight;
				} catch(e) {console.log(e)}
			},
			goSystemInfoList () {
				this.getnav(this.router(`systemInfoList?ip=/api/sys_msg/index`));
			},
			getBottonInfo () {
				 let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				 // console.log(menuButtonInfo)
				 this.buttonHeight = menuButtonInfo.height;
				 this.buttonTop = menuButtonInfo.top;
			}
		}
	}
</script>

<style lang="less">
	.publicTitle{
		.newnum{
			width: 20rpx;
			height: 20rpx;
			text-align: center;
			line-height: 20rpx;
			border-radius: 50%;
			background: #f00;
			position: absolute;
			top: 50rpx;
			left: 50rpx;
			color: #fff;
			font-size: 18rpx;
		}
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9998;
		box-sizing: border-box;
		.title{
			display: flex;
			align-items: center;
			overflow: hidden;
			width: calc(100% - 60rpx);
			position: absolute;
			top: 0;
			left: 30rpx;
			z-index: 9999;
			margin: 0 auto;
		}
		.logo{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			position: absolute;
			// top: 50%;
			left: 0;
			z-index: 99999;
			// transform: translateY(-50%);
			
		}
		.rpoBoxs{
			width: 34.7rpx;
			height: 34.7rpx;
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			.back{
				width: 20rpx;
				height: 34.7rpx;
				// margin-left: 12rpx;
				margin-right: 20rpx;
			}
		}
		
		.word{
			font-size: 36rpx;
			color: #000;
			margin: 0 auto;
			font-weight: bold;
		}
	}
</style>
